<template>
  <div class="app-container">
    <div>
      <BasicBusiness ref="basicBusinessRef" />
    </div>
    <div style="padding: 50px">
      <Step ref="stepRef" />
    </div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="180px"
    >
      <el-row :gutter="15">
        <el-col :span="16">
          <el-form-item label="选择合同" prop="draftContractId">
            <el-select
              v-model="formData.draftContractId"
              placeholder="请选择合同"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in draftContractOptions"
                :key="index"
                :label="item.draftContractId"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="getDownLink">下载合同</el-button>
        </el-col>
      </el-row>

      <el-form-item label="审核是否通过" prop="isApprove">
        <el-select
          v-model="formData.isApprove"
          placeholder="请选择审核是否通过"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in isApproveOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="审核未通过说明"
        prop="noPassNote"
        v-if="formData.isApprove == 2"
      >
        <el-input
          v-model="formData.noPassNote"
          type="textarea"
          placeholder="请输入审核未通过说明"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import BasicBusiness from "@/views/components/business/BasicBusiness.vue";
import Step from "@/views/components/business/Step.vue";

import {
  approveDraftContract,
  getProjectDetail,
  toApproveDraftContract,
} from "@/api/project/index";
export default {
  components: { BasicBusiness, Step },
  props: [],
  data() {
    return {
      formData: {
        isApprove: undefined,
        noPassNote: undefined,
        draftContractId: undefined,
      },
      rules: {
        isApprove: [
          {
            required: true,
            message: "请选择审核是否通过",
            trigger: "change",
          },
        ],
        draftContractId: [
          {
            required: true,
            message: "请选择合同",
            trigger: "blur",
          },
        ],
      },
      draftContractOptions: [],
      isApproveOptions: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
    };
  },
  computed: {
    boId() {
      return this.$route.query.boId;
    },
    projectId() {
      return this.$route.query.projectId;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.basicBusinessRef.loadData(this.boId).then((res) => {});

      getProjectDetail(this.boId).then((res) => {
        this.stage = res.data.stage;
        this.$refs.stepRef.setStage(this.stage);
      });

      toApproveDraftContract(this.boId).then((res) => {
        this.draftContractOptions = res.rows;
        console.log(res.rows);
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单

        approveDraftContract({
          ...this.formData,
        }).then(res => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.replace('/contract/index');
        })
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    getDownLink() {
      const file = this.draftContractOptions.find(
        (item) => item.id === this.formData.draftContractId
      );
      console.log(
        this.draftContractOptions,
        this.formData.draftContractId,
        file
      );
      if (file) {
        this.$download.fileId(file.draftContractId);
      }
    },
  },
};
</script>
<style></style>
